<template>
  <div class="detail-bottom-bar">
    <div class="left-bar">
      <div class="left-bar-item">
        <img src="~assets/img/tabBar/customer_service.svg" alt="">
        <p>客服</p>
      </div>
      <div class="left-bar-item">
        <img src="~assets/img/tabBar/shop_city_active.svg" alt="">
        <p>店铺</p>
      </div>
      <div class="left-bar-item">
        <img src="~assets/img/tabBar/shop_car_active.svg" alt="">
        <p>购物车</p>
      </div>
    </div>
    <div class="right-bar">
      <div class="right-bar-item"
           @click="addShopCar">加入购物车</div>
      <div class="right-bar-item">立即购买</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailBottomBar",
  methods: {
    addShopCar() {
      this.$emit('addShopCar');
      this.$toast.showToast()
    }
  }
}
</script>

<style scoped lang="less">
  .detail-bottom-bar {
    background-color: #f6f6f6;
    position: relative;
    z-index: 999;
    display: flex;
    height: 45px;
  }
  .left-bar {
    flex: 50%;
    display: flex;
    padding: 0 10px;
  }
  .left-bar-item {
    flex: 1;
    padding-top: 4px;
    text-align: center;
    img {
      width: 24px;
      height: 24px;
      vertical-align: middle;
    }
    p {
      font-size: 12px;
      color: var(--color-text);
    }
  }
  .right-bar {
    flex: 50%;
    display: flex;
    line-height: 45px;
    text-align: center;
  }
  .right-bar-item {
    flex: 1;
    color: #ffffff;
    font-size: 16px;
  }
  .right-bar-item:first-child {
    background-color: #FF8247;
  }
  .right-bar-item:last-child {
    background-color: var(--color-high-text);
  }
  .right-bar-item:active {
    filter: grayscale(50%);
    transition: all .2s;
  }
</style>